<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:p="http://primefaces.prime.com.tr/ui">
<ui:composition template="/template.xhtml">
	<ui:define name="center">


		<h:form>
			<p:dialog header="Adicionar Categoria" widgetVar="dlg2" width="250"
				draggable="false" resizable="false">
				<h:panelGrid columns="2">
					<h:outputLabel value="Nome:" />
					<p:inputText size="10" value="#{beanCategoria.categoria.nome}" />
				</h:panelGrid>
				<p:commandButton value="Adicionar" onclick="dlg2.close();"
					action="#{beanCategoria.salvar}"></p:commandButton>
			</p:dialog>
		</h:form>

		<h:form id="formPrincipal">
			<script type="text/javascript" src="jquery/jquery.price.js"></script>
			<script type="text/javascript">	
						jQuery(document).ready(function(){
								jQuery('#lf').hide();
								jQuery('#lp').hide();
								jQuery("input[type=radio][name=lancamento]").click(function() {
									var suporte = jQuery("input[type=radio][name=lancamento]:checked").val();
									if (suporte==0) { 
										jQuery('#lf').hide();
										jQuery('#lp').hide();
									}
									if (suporte==1) { 
										jQuery('#lf').show('slow');
										jQuery('#lp').hide();
									}
									if (suporte==2) { 
										jQuery('#lp').show('slow');
										jQuery('#lf').hide();
										}
									});	
								jQuery('.monetario').priceFormat({prefix:'R$ '});
						});
					</script>

			<div style="float: left">


				<p:panel id="panelHeader"
					style="width:275px;margin-top:15px;margin-left: 15px"
					header="Balanço do Mês Atual" autoHeight="true">
					<h:panelGrid columns="2">
						<h:outputLabel value="Receita: " />
						<h:outputText value="R$ #{beanPrincipal.valorReceita}"
							style="color:green" />
						<h:outputLabel value="Despesa: " />
						<h:outputText value="R$ #{beanPrincipal.valorDespesa}"
							style="color:red" />
						<h:outputLabel value="Saldo: " />
						<h:outputLabel value="R$ #{beanPrincipal.valorSaldo}"
							style="color:#{beanPrincipal.cor}" />
					</h:panelGrid>
					

				</p:panel>

				<p:panel style="width:275px;margin-top:15px;margin-left: 15px"
					header="Adicionar" autoHeight="true">


					<h:panelGrid columns="2">
						<h:outputLabel value="Tipo: " style="font-size:10pt" />
						<h:selectOneRadio value="#{beanPrincipal.tipo}"
							style="font-size: 10pt" required="true">
							<f:selectItem itemLabel="receita" itemValue="1"
								value="#{beanPrincipal.tipo}" />
							<f:selectItem itemLabel="despesa" itemValue="2"
								value="#{beanPrincipal.tipo}" />
						</h:selectOneRadio>
						<h:outputLabel value="Descrição:" style="font-size:10pt" />
						<p:inputText size="15" id="adicionarDescricao"
							value="#{beanPrincipal.descricao}" required="true" />
						<h:outputLabel value="Valor:" style="font-size:10pt" />
						<p:inputText size="15" styleClass="monetario" required="true"
							value="#{beanPrincipal.valor}" converter="dinheiroConverter" />
						<h:outputText value="Categoria: " style="font-size:10pt" />
						<h:panelGroup>
							<h:selectOneMenu value="#{beanPrincipal.categoria}"
								converter="categoriaConverter"
								style="width: 115px;font-size:10pt">
								<f:selectItems value="#{beanPrincipal.listaCategoria}"
									var="categoria" itemLabel="#{categoria.nome}"
									itemValue="#{categoria}" />
							</h:selectOneMenu>
							<p:commandLink value="adicionar"
								style="font-size:9pt;margin-left:15px" onclick="dlg2.show();" />
						</h:panelGroup>

						<h:outputText value="Data: " style="font-size:10pt" />
						<p:calendar value="#{beanPrincipal.data}" size="10" locale="pt_Br"
							showOn="button" pattern="dd/MM/yyyy" readOnlyInputText="true"
							required="true" />
					</h:panelGrid>

					<div id="conteudo" class="conteudo" onclick="true">
						<h:panelGrid columns="2">
							<input type="radio" name="lancamento" value="0" checked="checked" />
							<h:outputLabel value="Lançamento Único" style="font-size:10pt" />
							<input type="radio" name="lancamento" value="1" />
							<h:outputLabel value="Lançamento Fixo" style="font-size:10pt" />
							<input type="radio" name="lancamento" value="2" />
							<h:outputLabel value="Lançamento Parcelado"
								style="font-size:10pt" />
						</h:panelGrid>
					</div>

					<div id="lf">
						<h:outputText value="Venc. " style="font-size:8pt" />
						<h:selectOneMenu style="font-size:8pt"
							value="#{beanPrincipal.tipoPeriodo}">
							<f:selectItem itemLabel="semanal" itemValue="1" />
							<f:selectItem itemLabel="mensal" itemValue="2" />
							<f:selectItem itemLabel="semestral" itemValue="3" />
						</h:selectOneMenu>
						<h:outputText value=" por " style="font-size:8pt" />
						<h:selectOneMenu style="font-size:8pt"
							value="#{beanPrincipal.periodo}">
							<f:selectItem itemLabel="3 meses" itemValue="1" />
							<f:selectItem itemLabel="6 meses" itemValue="2" />
							<f:selectItem itemLabel="1 ano" itemValue="3" />
							<f:selectItem itemLabel="2 anos" itemValue="4" />
						</h:selectOneMenu>
					</div>

					<div id="lp">
						<h:panelGrid columns="3">
							<h:outputText value="Parcelado em" style="font-size:8pt" />
							<h:selectOneMenu style="font-size:8pt;width: 50px" height="100"
								value="#{beanPrincipal.periodo2}">
								<f:selectItem itemLabel="2" itemValue="2" />
								<f:selectItem itemLabel="3" itemValue="3" />
								<f:selectItem itemLabel="4" itemValue="4" />
								<f:selectItem itemLabel="5" itemValue="5" />
								<f:selectItem itemLabel="6" itemValue="6" />
								<f:selectItem itemLabel="7" itemValue="7" />
								<f:selectItem itemLabel="8" itemValue="8" />
								<f:selectItem itemLabel="9" itemValue="9" />
								<f:selectItem itemLabel="10" itemValue="10" />
								<f:selectItem itemLabel="11" itemValue="11" />
								<f:selectItem itemLabel="12" itemValue="12" />
								<f:selectItem itemLabel="13" itemValue="13" />
								<f:selectItem itemLabel="14" itemValue="14" />
								<f:selectItem itemLabel="15" itemValue="15" />
								<f:selectItem itemLabel="16" itemValue="16" />
								<f:selectItem itemLabel="17" itemValue="17" />
								<f:selectItem itemLabel="18" itemValue="18" />
								<f:selectItem itemLabel="19" itemValue="19" />
								<f:selectItem itemLabel="20" itemValue="20" />
								<f:selectItem itemLabel="21" itemValue="21" />
								<f:selectItem itemLabel="22" itemValue="22" />
								<f:selectItem itemLabel="23" itemValue="23" />
								<f:selectItem itemLabel="24" itemValue="24" />
								<f:selectItem itemLabel="25" itemValue="25" />
								<f:selectItem itemLabel="26" itemValue="26" />
								<f:selectItem itemLabel="27" itemValue="27" />
								<f:selectItem itemLabel="28" itemValue="28" />
								<f:selectItem itemLabel="29" itemValue="29" />
								<f:selectItem itemLabel="30" itemValue="30" />
							</h:selectOneMenu>
							<h:selectOneMenu style="font-size:8pt"
								value="#{beanPrincipal.tipoPeriodo2}">
								<f:selectItem itemLabel="semanas" itemValue="1" />
								<f:selectItem itemLabel="meses" itemValue="2" />
								<f:selectItem itemLabel="semestres" itemValue="3" />
								<f:selectItem itemLabel="anos" itemValue="4" />
							</h:selectOneMenu>

						</h:panelGrid>
					</div>


					<p:commandButton value="lançar"
						action="#{beanPrincipal.salvarReceitaDespesa}"
						style="margin-left:80px;margin-top:20px" update="@form " />

				</p:panel>
			</div>


			<div
				style="float: center; padding-left: 300px; padding-top: 15px; width: 690px">



				<p:panel header="Despesas"
					style="margin-left:10px;margin-right:10px;margin-bottom:10px">
					<p:dataTable id="tabelaDespesa"
						emptyMessage="Não há registros para estes parâmetros"
						style="margin-top:15px;font-size:11pt;font-color:black"
						paginator="true" rows="5" var="d"
						value="#{beanPrincipal.listaParcelaDespesa}">


						<p:column headerText="Descrição"
							style="background-color:rgb(#{d.despesa.categoria.cor})">
							<h:outputText
								value="#{d.despesa.descricao}  #{d.parcela}#{d.despesa.numeroParcelas}" />
						</p:column>
						<p:column headerText="Categoria"
							style="width:90px;background-color:rgb(#{d.despesa.categoria.cor})">
							<h:outputText value="#{d.despesa.categoria.nome}" />
						</p:column>
						<p:column headerText="Valor"
							style="width:80px;background-color:rgb(#{d.despesa.categoria.cor})">
							<h:outputText value="#{d.valor}">
								<f:convertNumber currencySymbol="R$" type="currency" />
							</h:outputText>
						</p:column>
						<p:column headerText="Vencimento"
							style="width:70px;background-color:rgb(#{d.despesa.categoria.cor})">
							<h:outputText value="#{d.dataParcela}">
								<f:convertDateTime pattern="dd/MM/yyyy" />
							</h:outputText>
						</p:column>
						<p:column style="width:20px">
							<h:commandLink disabled="true">
								<p:graphicImage
									value="#{beanPrincipal.iconeCompensado(d.compensado)}"></p:graphicImage>
							</h:commandLink>

						</p:column>

					</p:dataTable>
				</p:panel>
				<p:panel header="Receitas"
					style="margin-buttom:10px;margin-left:10px;margin-right:10px">
					<p:dataTable id="tabelaReceita"
						emptyMessage="Não há registros para estes parâmetros"
						style="margin-top:15px;font-size:11pt;font-color:black"
						paginator="true" rows="5" var="r"
						value="#{beanPrincipal.listaParcelaReceita}">



						<p:column headerText="Descrição"
							style="background-color: rgb(#{r.receita.categoria.cor})">
							<h:outputText
								value="#{r.receita.descricao}  #{r.parcela}#{r.receita.numeroParcelas}" />
						</p:column>
						<p:column headerText="Categoria"
							style="width:90px;background-color: rgb(#{r.receita.categoria.cor})">
							<h:outputText value="#{r.receita.categoria.nome}" />
						</p:column>
						<p:column headerText="Valor"
							style="width:80px;background-color: rgb(#{r.receita.categoria.cor})">
							<h:outputText value="#{r.valor}">
								<f:convertNumber currencySymbol="R$" type="currency" />
							</h:outputText>
						</p:column>
						<p:column headerText="Vencimento"
							style="width:70px;background-color: rgb(#{r.receita.categoria.cor})">
							<h:outputText value="#{r.dataParcela}">
								<f:convertDateTime pattern="dd/MM/yyyy" />
							</h:outputText>
						</p:column>

						<p:column style="width:20px">
							<h:commandLink disabled="true">
								<p:graphicImage
									value="#{beanPrincipal.iconeCompensado(r.compensado)}"></p:graphicImage>
							</h:commandLink>
						</p:column>
					</p:dataTable>
				</p:panel>
			</div>



		</h:form>
	</ui:define>
</ui:composition>
</html>